<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" href="favicon.ico" type="image/x-icon"/>
	<link rel="stylesheet" href="examples-styles.css"/>

	<title>abcjs animation</title>
	<script src="../dist/abcjs-basic.js" type="text/javascript"></script>

	<style media="screen" type="text/css">
       .abcjs-cursor {
            stroke: blue;
        }
       @media (prefers-color-scheme: dark) {
           .abcjs-cursor {
               stroke: #ffffff;
           }
       }
       path {
		   transition: opacity 1s;
	   }
	   .abcjs-note.hidden, .abcjs-beam-elem.hidden {
		   opacity: 0;
	   }
	   .color {
		   stroke: red;
		   fill: red;
	   }
	</style>
</head>

<body onload="load()">
<header>
	<img src="https://paulrosen.github.io/abcjs/img/abcjs_comp_extended_08.svg" alt="abcjs logo">
	<h1>Animation</h1>
</header>
<div class="container">
	<div class="cursor-nav">
		<div>
			<label><input type="checkbox" id="hide-finished-measures" checked>Hide Finished Measures</label>
			<label><input type="checkbox" id="show-cursor" checked>Show Cursor</label>
			<label><input type="checkbox" id="color-note" checked>Color Note</label>
			<button id="do-animation">Start</button>
		</div>
	</div>
	<div id="paper" class="paper"></div>
	<div id="warnings"></div>
</div>

<script>
	var abcString = "T: Cooley's\n" +
		"M: 4/4\n" +
		"L: 1/8\n" +
		"R: reel\n" +
		"K: Emin\n" +
		"|:EBBA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|\n" +
		"EBBA B2 EB|B2 AB defg|afe^c dBAF|1 DEFD E2 D2:|2 DEFD E2 gf||\n" +
		"|:eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|\n" +
		"eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2 gf:|";

	function load() {
		var visualObj = ABCJS.renderAbc("paper", abcString, {add_classes: true});
		var timingCallbacks = new ABCJS.TimingCallbacks(visualObj[0], {
			beatCallback: beatCallback,
			eventCallback: eventCallback,
		});

		function createCursor() {
			var svg = document.querySelector("#paper svg");
			var cursor = document.createElementNS("http://www.w3.org/2000/svg", "line");
			cursor.setAttribute("class", "abcjs-cursor");
			cursor.setAttributeNS(null, 'x1', 0);
			cursor.setAttributeNS(null, 'y1', 0);
			cursor.setAttributeNS(null, 'x2', 0);
			cursor.setAttributeNS(null, 'y2', 0);
			svg.appendChild(cursor);
			return cursor;
		}
		var cursor = createCursor();

		var button = document.getElementById("do-animation");
		button.addEventListener("click", function() { startStop(); });
		var hideFinishedMeasures = document.getElementById("hide-finished-measures");
		var showCursor = document.getElementById("show-cursor");
		var colorNote = document.getElementById("color-note");

		var isRunning = false;
		var buttonText = ["Start", "Stop"];

		var pauseButtonControl = function () {
			isRunning = !isRunning;
			button.innerText = buttonText[isRunning ? 1 : 0];
		};

		var startStop = function() {
			isRunning = !isRunning;
			button.innerText = buttonText[isRunning ? 1 : 0];
			if (isRunning)
				timingCallbacks.start();
			else
				timingCallbacks.stop();
		}

		var restart = function() {
			timingCallbacks.start();
		}

		function beatCallback(currentBeat,totalBeats,lastMoment,position, debugInfo) {
			var x1, x2, y1, y2;
			if (currentBeat === totalBeats) {
				showAllMeasures();
				x1 = 0;
				x2 = 0;
				y1 = 0;
				y2 = 0;
			} else {
				x1 = position.left - 2;
				x2 = position.left - 2;
				y1 = position.top;
				y2 = position.top + position.height;
			}
			if (showCursor.checked) {
				cursor.setAttribute("x1", x1);
				cursor.setAttribute("x2", x2);
				cursor.setAttribute("y1", y1);
				cursor.setAttribute("y2", y2);
			}
			if (colorNote.checked)
				colorElements([]);
		}

		function hideMeasure(num) {
			var els = document.querySelectorAll(".abcjs-mm"+num);
			for (var i = 0; i < els.length; i++)
				els[i].classList.add("hidden")
		}
		function showAllMeasures() {
			var els = document.querySelectorAll(".hidden");
			for (var i = 0; i < els.length; i++)
				els[i].classList.remove("hidden")
		}

		var lastEls = [];
		function colorElements(els) {
			var i;
			var j;
			for (i = 0; i < lastEls.length; i++) {
				for (j = 0; j < lastEls[i].length; j++) {
					lastEls[i][j].classList.remove("color");
				}
			}
			for (i = 0; i < els.length; i++) {
				for (j = 0; j < els[i].length; j++) {
					els[i][j].classList.add("color");
				}
			}
			lastEls = els;
		}

		var lastMeasure = -1;
		function eventCallback(ev) {
			if (!ev) {
				pauseButtonControl();
				return;
			}
			if (ev.measureStart && hideFinishedMeasures.checked) {
				if (lastMeasure > ev.measureNumber)
					showAllMeasures();
				else if (lastMeasure >= 0)
					hideMeasure(lastMeasure);
				lastMeasure = ev.measureNumber;
			}
			if (colorNote.checked) {
				colorElements(ev.elements);
			}
		}
	}

</script>
</body>
</html>
